<template>
	<view class="index">

		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-nav">
			<view class="iconfont icon-sousuo"></view>
			<text>首页</text>
			<view class="" style="width:32rpx"></view>
		</view>
		<!-- #endif -->
		<!-- 顶部栏 -->
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view class="scroll-item" v-for="(item,index) in topBar" :key="index" @click='changeIndex(index)'
				:id="'top'+index">
				<text :class="topBarIndex===index?'f-active-color':'f-color'">{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- 内容区域 -->
		<swiper @change="changeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'" >
			<swiper-item v-for="(item,index) in dataList" :key="index">

				<scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'" @scrolltolower="loadMore(index)">
					<block v-if="item.data.length>0">
						<block v-for="(k,i) in item.data" :key="i">
							<!-- 推荐模板 -->
							<!-- 轮播图 -->
							<IndexSwiper v-if="k.type==='swiperList'" :data="k.data"></IndexSwiper>
							<template v-if="k.type==='iconsList'">
								<!-- 宫格 -->
								<Icons  :data="k.data"></Icons>
								<!-- 为您推荐 -->
								<Card cardTitle="为您推荐"></Card>
							</template>
							<!-- 品牌分类 -->
							<template v-if="k.type==='recommendList'">
								<!-- 为您推荐 -->
								<Recommend :data="k.data"></Recommend>
								<!-- 猜你喜欢 -->
								<Card cardTitle="猜你喜欢"></Card>
							</template>
							
							<!-- 其他模板 -->
							<template v-if="k.type==='bannerList'">
								<!-- 头图 -->
								<Banner :data="k.imgUrl"></Banner>
								<!-- 猜你喜欢 -->
								<Card cardTitle="猜你喜欢"></Card>
							</template>
							
							<!-- 商品列表 -->
							<CommodityList v-if="k.type==='commodityLis'" :data="k.data"></CommodityList>
						</block>
					</block>
					<view class="" v-else>
						暂无数据...
					</view>
					<!-- 上拉加载 -->
					<view class="load-text .f-color" v-if="flag">
						---我是有底线的---
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import indexSwiper from "@/components/index/indexSwiper.vue"
	import recommend from "@/components/index/recommend.vue"
	import card from "@/components/common/card.vue"
	import commodityList from "@/components/common/commodityList.vue"
	import banner from "@/components/index/banner.vue"
	import icons from "@/components/index/icons.vue"
	
	// import $http from "@/common/api/request.js"
	export default {
		components: {
			IndexSwiper: indexSwiper,
			Recommend: recommend,
			Card: card,
			CommodityList: commodityList,
			Banner: banner,
			Icons: icons,
		},
		data() {
			return {
				// 选中的索引
				topBarIndex: 0,
				// 顶栏索引跟随的id值  值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
				scrollIntoIndex: 'top0',
				// 内容块的高度值
				clentHeight: 0,
				// 顶栏的数据
				topBar: [],
				// 初始化缓存数据
				dataList: [],
				// 数据加载标签
				flag:false,
				// 分页
				pageIndex: [1,1,1,1,1,1],
			}
		},
		onLoad() {
			this.indexInit();
			// this.init();
		},
		onReady() {
			// 获取系统信息的异步接口
			uni.getSystemInfo({
				success: (res) => {
					// 获取可视区域高度
					// console.log(res.windowHeight);
					// 内容块高度 = 可视区域高度-顶部栏高度
					this.clentHeight = res.windowHeight - uni.upx2px(80) ;//- this.getClientHeight();
				}
			}) 
		},
		// 监听原生标题栏按钮点击事件，参数为Object
		onNavigationBarButtonTap(e){
			// console.log(e.float);
			if (e.float=="right") {
				// console.log(123);
				uni.navigateTo({
					url: '../search/search'
				});
			}
		},
		methods: {
			// 点击修改顶部栏索引事件
			changeIndex(index) {
				// console.log(index);
				if (this.topBarIndex == index) {
					return
				} else {
					// 修改分页
					// this.pageIndex[index] = 1;
					// 修改选中索引
					this.topBarIndex = index;
					// 修改顶部栏滑块跟随索引
					this.scrollIntoIndex = "top" + index;
					if (this.dataList[index].load=="first"&&index!=0) {
						this.getData();
						// console.log('初次请求');
					}
				}
			},
			// 顶部栏索引跟随轮播事件
			changeTab(event) {
				// 当前所在滑块的 index
				// console.log(event.detail.current);
				this.changeIndex(event.detail.current);
			},
			// 初始化首页数据(推荐页)
			indexInit() {
				this.$http.request({
					url:'/index/data'
				}).then((res)=>{
					// console.log(res);
					this.topBar = res.topBar;
					this.dataList = this.dataInit(res);
				}).catch(()=>{
					uni.showToast({title: '获取数据失败'})
				})
				/* const res = await $http.request({
					url:"/index/data4",
					methoo:"get"
				}); */
			},
			// 初始化数据以匹配顶行栏滑块
			dataInit(result) {
				// console.log(this.topBar.length);
				let arr = [];
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						// 添加首次滑动请求数据标签
						load:"first",
						// loadText:"上拉加载更多"
					};
					// console.log(result.data);
					// 获取首页推荐模块数据
					if (i == 0) {
						// console.log(result.data);
						obj.data = result.data;
						// console.log(obj);
					}
					// console.log(obj);
					arr.push(obj);
				}
				return arr;
			},
			// 获取可视区域高度【兼容】
			getClientHeight(){
				// 获取系统信息的同步接口
				const res = uni.getSystemInfoSync();
				// res.platform：获取客户端平台，值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
				// res.statusBarHeight：手机状态栏的高度
				// console.log(res.platform,res.statusBarHeight);
				const system = res.platform;
				if (system==='ios') {
					return 44+res.statusBarHeight;
				}else if (system==='android') {
					return 48+res.statusBarHeight;
				}else{
					// 微信小程序
					return 0;
				}
			},
			// 获取数据(其他页)
			getData(callback){
				// 拿到索引（推荐：0，其他：1,2，3...)
				let topBarIndex = this.topBarIndex;
				// 拿到不同模块id（推荐：1，其他：2，3，4...)
				let topBarId = this.topBar[topBarIndex].Id;
				// 请求不同模块的数据
				this.$http.request({
					url:`/index/${topBarId}/data/1`,
				}).then((res)=>{
					this.dataList[topBarIndex].data = [...this.dataList[topBarIndex].data,...res];
				}).catch(()=>{
					uni.showToast({title: '获取数据失败'})
				})
				// 请求结束后重新赋值
				this.dataList[topBarIndex].load = "nofirst";
				// 执行回调函数
				if (typeof callback==='function') {
					callback();
				}
			},
			// 获取更多数据（上拉加载）
			getMoreData(){
				// 拿到索引（推荐：0，其他：1,2，3...)
				let topBarIndex = this.topBarIndex;
				// 拿到不同模块id（推荐：1，其他：2，3，4...)
				let topBarId = this.topBar[topBarIndex].Id;
				// 分页
				let page = ++this.pageIndex[topBarIndex];
				// 请求不同模块的数据
				this.$http.request({
					url:`/index/${topBarId}/data/${page}`,
				}).then((res)=>{
					if (topBarId==1) {
						this.dataList[topBarIndex].data[3].data = [...this.dataList[topBarIndex].data[3].data,...res[0].data];
					}else{
						this.dataList[topBarIndex].data[1].data = [...this.dataList[topBarIndex].data[1].data,...res[0].data];
					}
				}).catch(()=>{
					uni.showToast({title: '获取数据失败'})
				})
				// 执行回调函数
				if (typeof callback==='function') {
					callback();
				}
			},
			// 上拉加载事务
			loadMore(index){
				// console.log(this.pageIndex);
				if (this.pageIndex[this.topBarIndex]>2) {
					return this.flag = true;
				}
				this.getMoreData();
			},
		},
	}
</script>

<style scoped>
	.load-text{
		border-top: 2rpx solid #636263;
		line-height: 60rpx;
		text-align: center;
	}
	.wx-nav {
		text-align: center;
		height: 200rpx;
		width: 100%;
		line-height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 4rpx solid #49BDFB;
	}
</style>
